<template>
    <div>
        <el-card class="my-20px">
            <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
        </el-card>
        <el-card>
            <statisticsComponent ref="statisticsRef" :query-data="query" />
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import statisticsComponent from './components/statisticsComponent.vue'
import { getDeptList, getSalesmanList } from '@/api/clients/signClient.ts'
import { ElMessage } from 'element-plus'

const statisticsRef = ref(null)

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '', //sessionStorage.getItem('deptId') ,
            placeholder: '请选择所属分组',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                if (item.options?.length) return
                getDeptList({
                    type: 1
                }).then(res => {
                    item.options = res
                })
            },
            handleChange: () => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
    },
    buttonList: [
    ]
})

const query = ref({})

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        query[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    console.log(query, 'queryqueryqueryquery')
    return query
}

const handleSearch = () => {
    query.value = createQuery()
    // setTimeout(() => {
    //     statisticsRef.value.getData()
    //     statisticsRef.value.getOperationData()
    //     statisticsRef.value.refreshData()
    // }, 0);
}
const getOption = () => {
    getDeptList({
        type: 1
    }).then(res => {
        filterData.value.list.deptId.options = res
        const myDeptId = sessionStorage.getItem('deptId')
        if (filterData.value.list.deptId.options.find(i => i.deptId === myDeptId)) {
            filterData.value.list.deptId.value = sessionStorage.getItem('deptId') * 1
        }
    })
}
onMounted(() => {
    query.value = createQuery()
    getOption()
})
onActivated(() => {
    query.value = createQuery()
    getOption()
})
// throttle(() => {
//     window.addEventListener('resize', () => {
//         statisticsRef.value.resize()
//     }, false)
// }, 1000)
</script>
<style lang="scss" scoped></style>
